<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-用户中心</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
	</style>
</head>
<body>
	<div th:replace="header::top"></div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/fanxian-mall.png" width="150px" height="60px"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>		
	</div>
	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>
				<span></span>
				<ul class="subnav" id="LAY_CategoryList">
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">首页</a></li>
				<li class="interval">|</li>
				<li><a href="/page/list">全部商品</a></li>
				<li class="interval">|</li>
				<li><a href="/page/turntable">抽奖</a></li>
			</ul>
		</div>
	</div>
	<br>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="/page/user/info">· 个人信息</a></li>
				<li><a href="/page/user/order">· 全部订单</a></li>
				<li><a href="/page/user/site" class="active">· 收货地址</a></li>
				<li><a href="/page/user/coupon">· 我的优惠券</a></li>
				<li><a href="/page/user/collect">· 我的收藏</a></li>
				<li><a href="/page/user/footprint">· 我的足迹</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<h3 class="common_title2">编辑地址</h3>
				<div class="site_con">
					<form class="layui-form" action="">
						<br>
						<div class="layui-form-item">
							<label class="layui-form-label">收货人姓名</label>
							<div class="layui-input-inline layui-input-wrap">
								<input type="text" name="receiverName" lay-verify="required" placeholder="请输入收货人姓名" autocomplete="off" lay-reqtext="请填写收货人姓名" lay-affix="clear" class="layui-input">
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">电话号码</label>
								<div class="layui-input-inline layui-input-wrap">
									<input type="tel" name="receiverPhone" lay-verify="required|phone" placeholder="请输入电话号码" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
								</div>
							</div>
							<div class="layui-inline">
								<label class="layui-form-label">手机号码</label>
								<div class="layui-input-inline layui-input-wrap">
									<input type="tel" name="receiverMobile" lay-verify="required|phone" placeholder="请输入手机号码" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<label class="layui-form-label">地址信息</label>
							<div class="layui-input-inline">
								<select name="provinceId" id="provinceId" lay-filter="provinceId">
									<option value="">请选择省</option>
								</select>
							</div>
							<div class="layui-input-inline">
								<select name="cityId" id="cityId" lay-filter="cityId">
									<option value="">请选择市</option>
								</select>
							</div>
							<div class="layui-input-inline">
								<select name="areaId" id="areaId">
									<option value="">请选择县/区</option>
								</select>
							</div>
						</div>

						<div class="layui-form-item layui-form-text">
							<label class="layui-form-label">详细地址</label>
							<div class="layui-input-block">
								<textarea name="receiverAddress" placeholder="请输入详细地址信息，如道路、门牌号、小区、楼栋号、单元等信息" class="layui-textarea" style="width: 600px"></textarea>
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-inline">
								<label class="layui-form-label">邮政编码</label>
								<div class="layui-input-inline layui-input-wrap">
									<input type="tel" name="receiverZip" lay-verify="required|receiverZip" placeholder="请输入邮政编码" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
								</div>
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-input-block">
								<input type="checkbox" name="checked" value="1" title="设置为默认收货地址">
							</div>
						</div>

						<div class="layui-form-item">
							<div class="layui-input-block">
								<button type="submit" class="layui-btn" lay-submit lay-filter="ShippingAdd">立即提交</button>
								<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>
					</form>
				</div>
				<h3 class="common_title2">收货地址</h3>
				<div class="site_con" style="text-align: center">
					<div style="text-align: center">
						<table class="layui-table" style="width: 95%; margin-left: auto; margin-right: auto;">
							<colgroup>
								<col width="10%">
								<col width="15%">
								<col width="31%">
								<col width="8%">
								<col width="12%">
								<col width="12%">
								<col width="12%">
							</colgroup>
							<thead>
								<tr style="background: #E0E0E0">
									<th>收货人</th>
									<th>所在地区</th>
									<th>详细地址</th>
									<th>邮编</th>
									<th>手机号</th>
									<th>操作</th>
									<th></th>
								</tr>
							</thead>
							<tbody style="text-align: left" id="ShippingList">
								<tr>
									<td>高泉森</td>
									<td>山东省 烟台市<br>栖霞市</td>
									<td>有朋自远方来，不亦乐乎</td>
									<td>666666</td>
									<td>17616262669</td>
									<td style="text-align: center"><a href="javascript:;">修改</a>  |  <a href="javascript:;">删除</a></td>
									<td style="text-align: center"><button type="button" class="layui-btn layui-btn-sm layui-btn-normal">默认地址</button></td>
								</tr>
								<tr>
									<td>高泉森</td>
									<td>山东省 烟台市<br>栖霞市</td>
									<td>有朋自远方来，不亦乐乎</td>
									<td>666666</td>
									<td>17616262669</td>
									<td style="text-align: center"><a href="javascript:;">修改</a>  |  <a href="javascript:;">删除</a></td>
									<td style="text-align: center"><a href="javascript:;">设为默认</a></td>
								</tr>
							</tbody>
						</table>
					</div>

				</div>
		</div>


	</div>



	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>
	<script>
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		layui.use(['form', 'laydate', 'util'], function(){
			var form = layui.form;
			var layer = layui.layer;

			// 提交事件
			form.on('submit(ShippingAdd)', function(data){
				var field = data.field; // 获取表单字段值
				$.post(
						'/shipping/add',
						field,
						function (result) {
							console.log(result);
							if (result.code == 0) {
								mylayer.okMsg(result.msg);
								// layer.close(index);
								// table.reload('tableId');
								setInterval(function() {
									//刷新父页面
									window.location.reload();
								}, 2000)
							} else {
								mylayer.errorMsg(result.msg);
							}
						},
						'json'
				);
				return false; // 阻止默认 form 跳转
			});

			$(function () {
				$.post(
						'/shipping/selectProvince',
						function (result) {
							console.log(result);
							$(result.data).each(function () {
								$('#provinceId').append('<option value="'+this.provinceId+'">'+this.province+'</option>');
							})
							form.render('select');
						},
						'json'
				)
			});
			form.on('select(provinceId)', function(data){
				var elem = data.elem; // 获得 select 原始 DOM 对象
				var value = data.value; // 获得被选中的值
				var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

				$.post(
						'/shipping/selectCity',
						{'provinceId': value},
						function (result) {
							console.log(result);
							if (result.code == 0) {
								$('#cityId').empty();
								$(result.data).each(function () {
									$('#cityId').append('<option value="'+this.cityId+'">'+this.city+'</option>');
								})
								form.render('select');
							}
						},
						'json'
				);
			});
			form.on('select(cityId)', function(data){
				var elem = data.elem; // 获得 select 原始 DOM 对象
				var value = data.value; // 获得被选中的值
				var othis = data.othis; // 获得 select 元素被替换后的 jQuery 对象

				$.post(
						'/shipping/selectArea',
						{'cityId': value},
						function (result) {
							console.log(result);
							if (result.code == 0) {
								$('#areaId').empty();
								$(result.data).each(function () {
									$('#areaId').append('<option value="'+this.areaId+'">'+this.area+'</option>');
								})
								form.render('select');
							}
						},
						'json'
				);
			});
			// 自定义验证规则
			form.verify({

				receiverZip: function(value, elem) {
					if (!/^[\S]{6}$/.test(value)) {
						return '邮政编码必须为6位的非空数字';
					}
				}
			});
		});
		$.post(
				'/shipping/ListByUerId',
				function (result) {
					if (result.code == 0) {
						var html = '';
						$('#ShippingList').empty();
						$(result.data).each(function () {
							if (this.checked == 1) {
								html += '<tr  id="'+this.id+'">'
								html += '	<td>'+this.receiverName+'</td>'
								html += '	<td>'
								html += '		'+this.receiverProvince+''
								if (this.receiverCity === '市辖区'|| this.receiverCity === '县') {
									html += ' '
								} else {
									html += '					'+this.receiverCity+'<br>'
								}
								html += '		'+this.receiverArea+''
								html += '	</td>'
								html += '	<td>'+this.receiverAddress+'</td>'
								html += '	<td>'+this.receiverZip+'</td>'
								html += '	<td>'+this.receiverMobile+'</td>'
								html += '	<td style="text-align: center"><a href="javascript:;" id="updateShipping">修改</a>  |  <a href="javascript:;" id="deleteShipping">删除</a></td>'
								html += '	<td style="text-align: center"><button type="button" class="layui-btn layui-btn-sm layui-btn-normal">默认地址</button></td>'
								html += '</tr>'
							} else {
								html += '<tr  id="'+this.id+'">'
								html += '	<td>'+this.receiverName+'</td>'
								html += '	<td>'
								html += '		'+this.receiverProvince+''
								if (this.receiverCity === '市辖区'|| this.receiverCity === '县') {
									html += ' '
								} else {
									html += '					'+this.receiverCity+'<br>'
								}
								html += '		'+this.receiverArea+''
								html += '	</td>'
								html += '	<td>'+this.receiverAddress+'</td>'
								html += '	<td>'+this.receiverZip+'</td>'
								html += '	<td>'+this.receiverMobile+'</td>'
								html += '	<td style="text-align: center"><a href="javascript:;" id="updateShipping">修改</a>  |  <a href="javascript:;" id="deleteShipping">删除</a></td>'
								html += '	<td style="text-align: center"><a href="javascript:;" id="default">设为默认</a></td>'
								html += '</tr>'
							}
						});
						$('#ShippingList').append(html);

						$('#ShippingList').on('click', '#deleteShipping',function() {

							var id = $(this).closest('tr').attr('id');
							layer.confirm(
									'您确定要删除吗？',
									{icon : 3},
									function (index) {
										$.post(
												'/shipping/delete',
												{'id': id,},
												function (result) {
													if (result.code == 0) {
														mylayer.okMsg(result.msg);
														window.location.reload();
													}
												},
												'json'
										);
									}
							)

						});
						$('#ShippingList').on('click', '#default',function() {

							var id = $(this).closest('tr').attr('id');
							layer.confirm(
									'您确定要设置为默认地址吗？',
									{icon : 3},
									function (index) {
										$.post(
												'/shipping/updateDefault',
												{'id': id,},
												function (result) {
													if (result.code == 0) {
														mylayer.okMsg(result.msg);
														window.location.reload();
													}
												},
												'json'
										);
									}
							)

						});
						$('#ShippingList').on('click', '#updateShipping',function() {

							var id = $(this).closest('tr').attr('id');

							layer.open({
								type: 2,
								title: '修改收货地址',
								area: ['50%', '75%'],// 宽高
								content: '/page/shipping/update?id='+id,
							});

						});


					}
				},
				'json'
		);

		$.post(
				'/category/listAll',
				function (result) {
					if (result.code == 0) {
						$('#LAY_CategoryList').empty();
						$(result.data).each(function () {
							$('#LAY_CategoryList').append('<li><a href="/page/list?parentId=' + this.id + '">'+this.name+'</a></li>');
						})
					}
				},
				'json'
		);
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>